
import style from './index.module.less'
import IMGsuccess from '../../assets/radio.png'
import IMGtentSuccess from '../../assets/tentSuccess.png'
import IMGtentFail from '../../assets/tentFail.png'
import IMGuser from '../../assets/user.png'
import IMGemailg from '../../assets/emailg.svg'
import IMGphoneg from '../../assets/phoneg.svg'
import { putTent } from '../../request/api'
import IMGusera from '../../assets/user-photo.png'
import {
  Cell,
  Button,
} from '@hips/vue-ui'
export default {
  name: '',
  props: {
    userParams: {
      type: Object,
      default: () => { },
    },
    tentArrt: {
      type: Array,
      default: () => [],
    },
  },
  data () {
    return {
      showExit: false,
      tentArr: this.tentArrt,
    }
  },
  methods: {
    async changTent (index, code) {
      this.tentArr.forEach((item) => {
        item.selected = false;
      })
      this.tentArr[index].selected = true;
      try {
        let putTentUrl = `/iam/v1/users/tenant-id?tenantId=${code}`
        await putTent(putTentUrl);
        this.$emit('refresh')
      } catch (error) {
        this.$hips.toast('服务异常')
      }
    },
  },
  render () {
    let bind = style.fontt;
    const { realName,imageUrl ,
      phone, loginName, email,
    } = this.userParams;
    return (
      <div>
        <div class={style.headPerson}>
          <img src={imageUrl||IMGusera} alt="" />
          <div class={style.realName}>{realName}</div>
        </div>
        <div class={style.cardNow}>
          <div class={style.cardTitle}>当前租户</div>
          {
            this.tentArr && this.tentArr.length && this.tentArr.map((item, index) => {
              return <Cell value-align={true} onClick={() => {
                this.changTent(index, item.code)
              }} class={item.selected ? bind : ''}>
                <template slot="title">
                  {
                    item.selected ? <img src={IMGtentSuccess} alt="" class={style.icon} /> : <img src={IMGtentFail} alt="" class={style.icon} />
                  }
                  <span class={item.selected ? style.bluetext : style.zuhutext}>{item.value}</span>
                </template>
                <template slot="value">{
                  item.selected ? <img src={IMGsuccess} alt="" class={style.success} /> : null
                }
                </template>
              </Cell>
            })
          }
        </div>
        <div>
          <div class={style.cardTitle}>个人信息</div>
          <div class={style.infoPerson}>
            <Cell value-align={true}>
              <template slot="title">
                <img src={IMGuser} alt="" class={style.usericon} />
                <span>账号</span>
              </template>
              <template slot="value">{loginName}</template>
            </Cell>
          </div>
          <div class={style.infoPerson}>
            <Cell value-align={true}>
              <template slot="title">
                <img src={IMGphoneg} alt="" class={style.usericon} />
                <span>电话</span>
              </template>
              <template slot="value" class={style.value}>{phone}</template>
            </Cell>
          </div >
          <div class={style.infoPerson}>
            <Cell value-align={true}>
              <template slot="title">
                <img src={IMGemailg} alt="" class={style.usericon} />
                <span>邮箱</span>
              </template>
              <template slot="value">{email || "无值"}</template>
            </Cell>
          </div>
        </div>
        <div class={style.buttonCard}>
          <div class={style.buttonExit}>
            <Button onClick={() => {
              this.$emit('modal')
            }}>退出登录</Button>
          </div>
        </div>
      </div >
    )
  },
}
